<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>订单详情</title>
   <link rel="stylesheet" href="css/order_details.css">
      <!-- 引入样式 -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <script src="js/jquery.min.js"></script>
      <script src="js/jquery.cookie.js"></script>

</head>
  
<body>
   <div id="app">
      <!-- 头部 -->
      <div class="top-wrap">
         <div class="top-icon">
               <img src="../order/image/logo.png" >
         </div>
      </div>

      <!-- 主要内容 -->
      <div class="order-detail">
         
         <div class="navigation">
            <a href="">个人中心 </a>/
            <a href=""> 我的订单 </a>/
            <a>订单号:{{orderDetail.orderNo}}</a>
         </div>

         <!-- 订单状态 已取消-->
         <div class="item" v-if="orderDetail.orderStatus == 0">
            <div class="status-wrap">
               <div class="title">订单状态</div>
               <div class="status" >
                  <span class="item-box">
                     <div class="circle"></div>
                     待支付</span>
                  <span class="item-box">
                     <div class="circle"></div>
                     待使用</span>
                  <span class="item-box">
                     <div class="circle"></div>
                     已使用</span>
                  <span class="item-box">
                     <div class="await-icon await-pay">
                        <div></div>
                     </div>
                     已取消</span>
               </div>
               <div class="cancel" @click="deleteOrder(orderDetail.orderId)">删除订单</div>
            </div>

            <div class="content-wrap">
               <span>订单已取消，期待您下次订购！</span>
               <div class="content-right">
                  <div class="item-price">￥<span>{{orderDetail.orderPrice}}</span></div>
                  <!-- <div class="btn-pay">去付款(剩余20:30)</div> -->
               </div>
            </div>
         </div>
         <!-- 待支付 -->
         <div class="item" v-if="orderDetail.orderStatus == 1">
            <div class="status-wrap">
               <div class="title">订单状态</div>
               <div class="status" >
                  <span class="item-box">
                     <div class="await-icon await-pay">
                        <div></div>
                     </div>
                     待支付</span>
                  <span class="item-box">
                     <div class="circle"></div>
                     待使用</span>
                  <span class="item-box">
                     <div class="circle"></div>
                     已使用</span>
                  <span class="item-box">
                     <div class="circle"></div>
                     已取消</span>
               </div>
               <div class="cancel" @click="cancelOrder(orderDetail.orderId)">取消订单</div>
            </div>
            <!-- {{countTime(orderDetail.createTime)}} -->
            <div class="content-wrap">
               <span>完成预定后，酒店将在20分钟内确认结果</span>
               <div class="content-right">
                  <div class="item-price">￥<span>{{orderDetail.orderPrice}}</span></div>
                  <div class="btn-pay">去付款(剩余{{time}})</div>
               </div>
            </div>
         </div>
         <!-- 待使用 -->
         <div class="item" v-if="orderDetail.orderStatus == 2">
            <div class="status-wrap">
               <div class="title">订单状态</div>
               <div class="status" >
                  <span class="item-box">
                     <div class="circle"></div>
                     待支付</span>
                  <span class="item-box">
                     <div class="await-icon await-pay">
                        <div></div>
                     </div>
                     待使用</span>
                  <span class="item-box">
                     <div class="circle"></div>
                     已使用</span>
                  <span class="item-box">
                     <div class="circle"></div>
                     已取消</span>
               </div>
               <!-- <div class="cancel">删除订单</div> -->
            </div>

            <div class="content-wrap">
               <span>支付完成，祝您入住愉快！</span>
               <div class="content-right">
                  <div class="item-price">￥<span>{{orderDetail.orderPrice}}</span></div>
                  <!-- <div class="btn-pay">去付款(剩余20:30)</div> -->
               </div>
            </div>
         </div>
         <!-- 已使用 -->
         <div class="item" v-if="orderDetail.orderStatus == 3">
            <div class="status-wrap">
               <div class="title">订单状态</div>
               <div class="status" >
                  <span class="item-box">
                     <div class="circle"></div>
                     待支付</span>
                  <span class="item-box">
                     <div class="circle"></div>
                     待使用</span>
                  <span class="item-box">
                     <div class="await-icon await-pay">
                        <div></div>
                     </div>   
                     已使用</span>
                  <span class="item-box">
                     <div class="circle"></div>   
                     已取消</span>
               </div>
               <div class="cancel" @click="deleteOrder(orderDetail.orderId)">删除订单</div>
            </div>

            <div class="content-wrap">
               <span>您已使用完成，欢迎下次入住！</span>
               <div class="content-right">
                  <!-- <div class="item-price">￥<span>1470</span></div> -->
                  <div class="btn-pay" @click="goToComment(orderDetail.userId,orderDetail.hotelId,orderDetail.orderId)">去评价</div>
               </div>
            </div>
         </div>

         
         <div class="left-module">
            <div class="item">
               <div class="title">
                  <span>预订信息</span>
               </div>
               <div class="book-info">
                  <div class="b1">
                     <div class="head">
                        <span>入住房型</span>
                     </div>
                     <div class="info">
                        <span>{{orderDetail.roomType}}</span>
                     </div>
                  </div>
                  <div class="b1">
                     <div class="head">
                        <span>房间数</span>
                     </div>
                     <div class="info">
                        <span>1间</span>
                     </div>
                  </div>
                  <div class="b1">
                     <div class="head">
                        <span>入住日期</span>
                     </div>
                     <div class="info">
                        <span>{{orderDetail.checkInTime}}/{{orderDetail.checkOutTime}},共1晚</span>
                     </div>
                  </div>
                  <!-- <div class="b1">
                     <div class="head">
                        <span>预计到店时间</span>
                     </div>
                     <div class="info">
                        <span>预计 08-25 15:00</span>
                     </div>
                  </div> -->
                  <!-- <div class="b1">
                     <div class="head">
                        <span>早餐</span>
                     </div>
                     <div class="info">
                        <ul class="breakfast-list">
                           <li>
                              <div class="top">
                                 <span>08.25</span>
                              </div>
                              <div class="bottom">
                                 <span></span>
                              </div>
                           </li>
                           <li>
                              <div class="top">
                                 <span>08.26</span>
                              </div>
                              <div class="bottom">
                                 <span>单早</span>
                              </div>
                           </li>
                        </ul>
                     </div>
                  </div> -->

                  <div class="b1 warm-notice">
                     <div class="head">
                        <span>温馨提示</span>
                     </div>
                     <div class="warm-tip">
                        <span>当前价格为成人入住价格，儿童是否可以入住需要根据酒店实际儿童政策，详情请联系酒店；1名0-12岁儿童使用现有床铺免费，不含儿童早餐。</span>
                     </div>
                  </div>
               </div>
            </div>

            <div class="item" v-for="tenant in orderDetail.tenantList">
               <div class="title">
                  <span>入住信息</span>
               </div>
               <div class="cus-info">
                  <div class="b1">
                     <div class="head">
                        <span>入住人</span>
                     </div>
                     <div class="info">
                        <span>{{tenant.tenantName}}</span>
                     </div>
                  </div>
                  <div class="b1">
                     <div class="head">
                        <span>手机号</span>
                     </div>
                     <div class="info">
                        <span>{{tenant.tenantTelno}}</span>
                     </div>
                  </div>
               </div>
            </div>

            <div class="item">
               <div class="title">
                  <span>发票信息</span>
               </div>
               <div class="tipText">如需开具房费发票,请至酒店前台领取</div>
            </div>
         </div>
         <div class="right-module">
            <div class="hotel-info">
               <div class="room-pic">
                  <img :src="orderDetail.hotelImg">
                  <div class="goto-detail">
                     <a href="javascript:void(0)" @click="goToHotelDetail(orderDetail.hotelId)">酒店详情</a>
                  </div>
               </div>
               <div class="info-block">
                  <div class="hotel-name">
                     <span>{{orderDetail.hotelName}}</span>
                  </div>
                  <div class="hotel-tel">电话: 0512-{{orderDetail.hotelTelno}}</div>
                  <div class="hotel-address">地址: {{orderDetail.hotelLoc}}</div>
               </div>
            </div>
            <div class="loose-price">
               <div class="price-detail">
                  <div class="price-block">
                     <div class="title">房费</div>
                     <ul>
                        <li>
                           <span>2022-08-25</span>
                           <div>
                              <span>￥</span>
                              <span>{{orderDetail.oldPrice}}</span>
                              
                           </div>
                        </li>
                     </ul>
                  </div>
                  <div class="price-block">
                     <div class="title">优惠</div>
                     <ul>
                        <li v-if="zhekou!=undefined">
                           <span>{{zhekou.couponName}}</span>
                           <div>
                              <span>{{zhekou.couponDiscount}}</span>
                           </div>
                        </li>
                        <li v-if="manjian!=undefined">
                           <span>{{manjian.couponName}}</span>
                           <div>
                              <span>-{{manjian.couponPrice}}</span>
                           </div>
                        </li>
                     </ul>
                     <!-- <ul>
                        <li v-for="coupon in orderDetail.couponList">
                           <span>{{coupon.couponName}}</span>
                           <div>
                              <span>{{coupon.couponName=="折扣券"?coupon.couponDiscount:-coupon.couponPrice}}</span>
                        </li>
                     </ul> -->
                  </div>
               </div>
            </div>
         </div>
         <div class="totalPrice">
            <span>总价:</span>
            <span id="totalPrice">￥{{orderDetail.orderPrice}}</span>
         </div>
      </div>
   </div>
   
   <!--引入vue与element-ui-->
   <script src="../../js/untils/vue.js"></script>

   <!-- 引入组件库 -->
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <script src="../../js/untils/axios-0.18.0.js"></script>
   
   <script>
      new Vue({
         el: "#app",
         data() {
            return {
               // orderDetail: {
               //    cheakInDate : "2022-09-26T16:39:03",
               //    cheakOutDate : "2022-09-28T16:39:06",
               //    checkInTime : "2022-09-26",
               //    checkOutTime : "2022-09-28",
               //    createTime : "2022-10-17T20:05:23",
               //    hotelId : 101,
               //    hotelName : "苏州尼依格罗酒店",
               //    orderDataStatus : 1,
               //    orderId : 203301,
               //    orderNo : "1240511654",
               //    orderPrice : "1470.0",
               //    orderStatus : 0,
               //    orderTime : "2022-10-17T16:39:10",
               //    roomType : "N1豪华大床房",
               //    standby01 : null,
               //    userId : 1001
               // },
               orderDetail: "",
               time: "",//定时器
               manjian: {

                     },
               zhekou: {

                     },
               admin: "",
               userPhone: "",
            }
         },
         methods: {
               //订单倒计时
               countTime(){  
                  var that = this
                  //获取当前时间 
                  var createTime = that.orderDetail.createTime 
                  var date = new Date();  
                  var now = date.getTime();
                  var endTime = new Date(createTime).getTime()+(1000*60*20)  //截至的时间戳
                  // var nn=timestampToTime(parseInt(nTime));//之间的时间戳+当前的时间
                  console.log(endTime)
                  var now = date.getTime();
                  // //时间差  
                  var leftTime = endTime-now; 
                  // //定义变量 d,h,m,s保存倒计时的时间  
                  var d,h,m,s; 
                  m = parseInt(leftTime/1000/60%60) 
                  s = parseInt(leftTime/1000%60)
                  if (leftTime<0) {   
                     return; 
                  }
                  if(m<10){
                     m = '0'+m
                  }  
                  if(s<10){
                     s = '0'+s
                  }
                  if(m==0&&s==0){
                     that.orderDetail.orderStatus=0;
                     return;
                  } 

                  setTimeout(function(){
                     that.countTime()
                  },1000)
                  that.time=m+':'+s;
                  
               },
               // 删除订单
            deleteOrder(orderId){
               var that = this
               var result = window.confirm("确定删除本条记录么?");
               var url = "http://localhost:8080/customerOrder/deleteOrder/"+orderId;
               if (result){
                  axios({
                     method:"put",
                     url: url
                  }).then(function(resp){
                     alert("删除成功")
                     console.log(resp)
                     if(resp.data.code == 200){
                        that.selectAllOrder()
                     }
                  })
               }
            },
	         cancelOrder(orderId){
               var that = this
               var result = window.confirm("确定取消订单么?");
               var url = "http://localhost:8080/customerOrder/cancelOrder/"+orderId;
               if (result){
                  axios({
                     method:"put",
                     url: url
                  }).then(function(resp){
                     alert("取消成功")
                     // console.log(resp)
                     if(resp.data.code == 200){
                        that.selectAllOrder()
                     }
                  })
               }
            },
            //获取详情页面
            getDetail(){
               var that = this
               var result=localStorage.getItem("result")
               console.log("result"+result)

               if(result!= null){
                  axios({
                     method: "post",
                     url: "http://localhost:8080/customerOrder/getDetailOrder",
                     data: JSON.parse(result)
                  }).then(function(resp){
                     if(resp.data.code == 200){
                        that.orderDetail=resp.data.data
                        console.log("orderDetail"+JSON.stringify(that.orderDetail))
                        if(that.orderDetail.couponList!=undefined){
                           var couponList = that.orderDetail.couponList
                           for (let i = 0; i < couponList.length; i++) {
                              let coupon = couponList[i];
                              if(coupon.couponName=="折扣券"){
                                 that.zhekou = coupon
                              }else{
                                 that.manjian = coupon
                              }
                              
                           }
                        }
                     }
                     
                  })
               }
            },
            goToHotelDetail(hotelId){
                  window.location.href="../screen/details/details.html?phone="+this.userPhone+"&hotelId="+hotelId;
            },
            goToComment(userId,hotelId,orderId){
                  window.location.href = "../comment/extend-menu.html"+"?userId="+userId+"-"+hotelId+"-"+orderId+"-"+this.userPhone
               },
         },

         // 钩子函数
         created() {
            var url = decodeURI(window.location.href);
               // console.log("路径" + url)
               var phone = url.split("?phone=")[1]
               console.log("手机号:" + phone)
               this.userPhone = phone
               console.log(this.userPhone)
            var that = this
            // this.orderDetail = localStorage.getItem("orderDetail")
            // console.log(orderDetail)
            that.getDetail()
            that.countTime()
         },

         // 一般在初始化页面完成后,再对dom节点进行相关操作
         mounted() {
            

         },
      })
   </script>
</body>
</html>